<!-- 滚动条 -->
<template>
  <div class="scrollbar">
    <!-- 滚动条区域 -->
    <div class="srollbar-container" @mouseleave="handleMouseLeave()">
      <div
        class="scrollbar-op-item"
        :style="{ '--top': top }"
        @mousedown="handleMouseDown"
        @mouseup="handleMouseUp"
      ></div>
    </div>

    <!-- 内容放置区 -->
    <div class="content-container" ref="content" @scroll="handleScroll">
      <slot> </slot>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  data() {
    return {
      top: 0,//保存滚动条距顶部高度
      pageHeight:0,//保存页面高度
        trueScrollDistance:0,//实际可滚动距离
        startY:0,//按下滚动小条时其所处的位置：Y轴

    };
  },

  components: {},

  computed: {},

  mounted(){
      this.initScrollBar()
  },

  methods: {
      handleMouseDown(e){
     
          let rect = e.target.getBoundingClientRect();
          console.log(rect)
          this.startY = rect.top;
        window.addEventListener('mousemove',this.handleMouseMove)
          
      },
      handleMouseUp(){
          window.removeEventListener("mousemove",this.handleMouseMove)
      },
      handleScroll(){
          let scrolledHeight = this.$refs.content.scrollTop;
          this.setPageScrolled(scrolledHeight)
          let windowHeight = this.$refs.content.clientHeight;
          let pageScrollHeight = this.$refs.content.scrollHeight;
          console.log(windowHeight,'pagesheight',pageScrollHeight,'scrolled',scrolledHeight)
          this.top = scrolledHeight/(pageScrollHeight-windowHeight) * this.trueScrollDistance;

      },
      handleMouseMove(e){
          let pagescrollheight = this.$refs.content.scrollHeight
          console.log(e)
          if(e.clientY>=this.trueScrollDistance)
          {
              this.top=this.trueScrollDistance
          }
          else{
              this.top = e.clientY
          }
          this.$refs.content.scrollTop = this.top/this.trueScrollDistance * (pagescrollheight - this.pageHeight)
      },
      handleMouseLeave(){
          window.removeEventListener("mousemove",this.handleMouseMove)
      },
      initScrollBar(){
          console.log(pageScrollHeight,windowHeight)
          let pageScrollHeight = this.$refs.content.scrollHeight;
          let windowHeight = this.$refs.content.clientHeight;
          this.pageHeight = windowHeight;
          this.top = 36/pageScrollHeight * windowHeight - 34
          this.trueScrollDistance = windowHeight - 38
      },
      ...mapMutations([
          'setPageScrolled'
      ])
  },
};
</script>
<style>
.scrollbar {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.content-container {
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  top: 0;
  width: calc(100% - 16px);
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.srollbar-container {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 16px;
  border-radius: 5px;
  background-color: rgb(240, 240, 240);
  z-index: 1111;
}
.scrollbar-op-item {
  position: absolute;
  top: calc(var(--top) * 1px);
  height: 30px;
  width: 10px;
  border: 3px rgba(123, 123, 123, 0.585) solid;
  border-radius: 15px;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.2s;
}
.scrollbar-op-item:hover {
  border: 3px rgb(193, 187, 255) solid;
  transition: all 0.2s;
}
</style>